<!--
	作者：956911785@qq.com
	时间：2019年8月1日17:44:32
	描述：书籍分类-添加
-->

<template>
	<Modal :title="title" v-model="modal0" width="1000px">
		<Form ref="params" :model="params" :rules="ruleValidate" :label-width="120" label-position="left">
			<div style="width:100%;height:550px; overflow-y: hidden;">
		      	
				<div style="width:100%;height: 60px;line-height: 60px;float:left;">
		        	<div style="width: 50%;text-align: left;float: left;" align="left">
				        <FormItem prop="tmnr" label="题目内容">
				        	<Input v-model.trim="params.tmnr" placeholder="请输入题目内容" clearable style="width: 90%"></Input>
		        		</FormItem>
		        	</div>
		        	<div style="width: 50%;text-align: left;float: left;" align="left">
				        <FormItem prop="tx" label="题型">
				        	<Select v-model="params.tx" style="width:90%"  placeholder="请选择题型" @on-change="getanswer" clearable>
						        <Option value="0" >对错题</Option>
						        <Option value="1" >选择题</Option>
						    </Select>
		        		</FormItem>
		        	</div>
		      	</div>
		   
		      	<div style="width:100%;height: 60px;line-height: 60px;float:left;">
		        	<div style="width: 50%;text-align: left;float: left;" align="left">
				        <FormItem prop="answer" label="答案">
						    <Select v-model="params.answer" style="width:90%;float:left;" clearable>
						        <Option v-for="item in ans" :value="item" :key="item">{{ item }}</Option>
						    </Select>
		        		</FormItem>
		        	</div>
		      	</div>
		     
		      	<div style="width:100%;float:left;">
		        	<div style="width: 50%;text-align: left;float: left;" align="left">
				        <FormItem label="A选项">
				        	<Input v-model.trim="params.ad"  type="textarea" :rows="4" placeholder="请输入A选项答案" clearable style="width: 90%"></Input>
		        		</FormItem>
		        	</div>
		        	<div style="width: 50%;text-align: left;float: left;" align="left">
				       <FormItem label="B选项">
				        	<Input v-model.trim="params.bd"  type="textarea" :rows="4" placeholder="请输入B选项答案" clearable style="width: 90%"></Input>
		        		</FormItem>
		        	</div>
		        </div>
		        

				<div style="width:100%;float:left;">
		        	<div style="width: 50%;text-align: left;float: left;" align="left">
				        <FormItem label="C选项">
				        	<Input v-model.trim="params.cd"  type="textarea" :rows="4" placeholder="请输入C选项答案" clearable style="width: 90%"></Input>
		        		</FormItem>
		        	</div>
		        	<div style="width: 50%;text-align: left;float: left;" align="left">
				       <FormItem label="D选项">
				        	<Input v-model.trim="params.dd"  type="textarea" :rows="4" placeholder="请输入D选项答案" clearable style="width: 90%"></Input>
		        		</FormItem>
		        	</div>
		        </div>

				<div style="width:100%;float:left;">
		        	<div style="width: 50%;text-align: left;float: left;" align="left">
				        <FormItem label="E选项">
				        	<Input v-model.trim="params.ed"  type="textarea" :rows="4" placeholder="请输入E选项答案" clearable style="width: 90%"></Input>
		        		</FormItem>
		        	</div>
		        	<div style="width: 50%;text-align: left;float: left;" align="left">
				       <FormItem label="F选项">
				        	<Input v-model.trim="params.fd"  type="textarea" :rows="4" placeholder="请输入F选项答案" clearable style="width: 90%"></Input>
		        		</FormItem>
		        	</div>
		        </div>

		   </div> 
	    </Form>
	   	<div slot="footer">
	    	<Button type="text"  @click="closeModal()">取消</Button>
	    	<Button type="primary" @click="addsave()" >确定</Button>
	    </div>
    </Modal>
</template>

<script>

	export default {
		name:"tconent",
		props: {
    		teas:{
    			type:Object,	
    			default: function() {
					return null
				}
    		},
    		title:{
    			type:String,	
    		},
    	},
		data() {
			//长度控制
			const lenPass = (rule, str, callback) => {
			  if(str.length>rule.length){
			  	 callback(new Error('字符串长度在1-'+rule.length+'之间！'));
			  }
			  return callback();
			};
			
			return {
				ruleValidate: {
					tmnr: [
		                {required: true, message: '请填写题目内容！', trigger: 'blur'},
		                {length:100,validator:lenPass,trigger:'blur'}
		            ],
		            tx: [
		                {required: true, message: '选择题型！', trigger: 'blur'},
		            ],
		            answer: [
		                {required: true, message: '请选择题目答案！', trigger: 'blur'}
		            ],
		        },   
                modal0:false,
                params:{
                	qid:'', 
					tmnr:'', 
					tx:'', 
					answer:'', 
					bid:'', 
					ad:'', 
					bd:'', 
					cd:'', 
					dd:'', 
					ed:'', 
					fd:''
                },
                ans:['对','错','A','B','C','D','E','F'],
			}
		},
		methods: {
			addsave:function(){
				if(this.params.tx=="1"){
					var ad=this.params.ad;
					var bd=this.params.bd;
					var cd=this.params.cd;
					var dd=this.params.dd;
					var ed=this.params.ed;
					var fd=this.params.fd;
					if(ad=="" && bd=="" && cd=="" && dd=="" && ed=="" && fd==""){
						this.$Modal.error({
                            title: "提示",
                            content: "题型为选择题,请填写各选项内容"
                        });	
                        return;
					}
					var answer=this.params.answer;
					if(answer=="对" || answer=="错"){
						this.$Modal.error({
                            title: "提示",
                            content: "题型为选择题,答案不能为对或错"
                        });	
                        return;
					}
				}else{
					var answer=this.params.answer;
					if(answer!="对" && answer!="错"){
						this.$Modal.error({
                            title: "提示",
                            content: "题型为对错题,答案只能为对或错"
                        });	
                        return;
					}
				}
				
				this.$refs.params.validate((valid) => {
					if (valid){
						const params={...this.params};
						this.$emit("addsave",params);
                    }
                })
	        }, 
            closeModal(){
	      	    this.modal0 = false;
	      	    this.resetpar();
	        },
	        resetpar(){
	        	this.params={
	        		qid:'', 
					tmnr:'', 
					tx:'', 
					answer:'', 
					bid:'', 
					ad:'', 
					bd:'', 
					cd:'', 
					dd:'', 
					ed:'', 
					fd:''
				};
	        },
	        getanswer(){
	        	var tx=this.params.tx;
	        	if(tx=="0"){
	        		this.ans=['对','错'];
	        	}else{
	        		this.ans=['A','B','C','D','E','F'];
	        	}
	        }
 
		},
		mounted() {
		},
		watch:{
			modal0(news,olds){
				if(!news){
					 this.resetpar();
				}else{
					this.params={...this.teas};
					if(this.params.tx){
						this.getanswer();
					}
				}
			}
		},
		computed: {
		
		}
		
	}
</script>

<style scoped="scoped">
	
</style>



